<template>
  <div class="Canvas">
    <init-loading v-if="pageLoading" />
    <left-tabs v-show="viewExperiment" />
    <flow-chart-right />
    <ContextMenu />
    <cell-tooltip />
    <shortcut-key-list />
  </div>
</template>

<script setup lang="ts">
import LeftTabs from './LeftTabs/LeftTabsIndex.vue'
import { ref, onMounted, computed, onUnmounted, nextTick } from "vue"
import FlowChartRight from './FlowChartRight/index.vue'
import ContextMenu from './DagEdit/components/ContextMenu/index.vue'
import CellTooltip from './DagEdit/components/CellTooltip/index.vue'
import ShortcutKeyList from './DagEdit/components/ShortcutKeyList/index.vue'
import { designerStore } from 'src/stores/designerTool/designerTool'
import Mousetrap from 'mousetrap'
import initLoading from '../components/initLoading.vue'
const pageLoading = ref(true)
const store = designerStore()
const viewExperiment = computed(() => {
  return store.LeftTabsState
})
onMounted(() => {
  window.addEventListener('click', handleKeyup)
  window.addEventListener('contextmenu', handleKeyup)
  window.onbeforeunload = function () {
    return "您确定要关闭当前页面？"
  }
  store.SET_RIGHT_DRAWER(true)
  nextTick(() => {
    pageLoading.value = false
  })
})
onUnmounted(() => {
  window.removeEventListener('click', handleKeyup)
  window.removeEventListener('contextmenu', handleKeyup)
  window.removeEventListener('beforeunload',()=>{console.log()})
  store.resetDataByReadonly()
  Mousetrap.reset()
})
function handleKeyup(evn: any) {
  const { type } = evn
  store.SET_PUBLISH_EVENT({
    key: 'clickOrContextmenu',
    data: {
      type
    }
  })
}
</script>

<style scoped lang="scss">
@import "src/css/designerStyles/index.scss";

.Canvas {
  display: flex;
  height: 100%;
}
</style>
